<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>滚动弹出盒子</title>
    <style>
      body {
        margin: 0;
        background: linear-gradient(45deg, #7f7fd5, #86a8e7, #91eae4);
        font-family: 'Microsoft YaHei', sans-serif;
        min-height: 100vh;
        animation: gradientBG 15s ease infinite;
        background-size: 400% 400%;
      }

      @keyframes gradientBG {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      .popup-box {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        padding: 40px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        opacity: 0;
        visibility: hidden;
        transform-origin: center;
        transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform: translate(-50%, -50%) scale(0.8);
      }

      .popup-box h3 {
        color: #2c3e50;
        margin-top: 0;
        font-size: 1.8em;
        margin-bottom: 15px;
        background: linear-gradient(45deg, #7f7fd5, #86a8e7);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }

      .popup-box p {
        color: #34495e;
        line-height: 1.8;
        font-size: 1.1em;
        margin: 0;
      }

      .popup-box.show {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
      }

      .content {
        height: 2000px;
        padding: 60px 40px;
        max-width: 800px;
        margin: 0 auto;
      }

      .content h1 {
        color: white;
        text-align: center;
        margin-bottom: 30px;
        font-size: 2.5em;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        letter-spacing: 2px;
      }

      .content p {
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.8;
        font-size: 1.2em;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>向下滚动页面查看效果</h1>
      <p>这是测试内容...</p>
    </div>

    <div class="popup-box">
      <h3>弹出盒子</h3>
      <p>当页面滚动到300px时显示此盒子</p>
    </div>

    <script>
      window.addEventListener('scroll', function () {
        const popupBox = document.querySelector('.popup-box')
        if (window.scrollY > 300) {
          popupBox.classList.add('show')
        } else {
          popupBox.classList.remove('show')
        }
      })
    </script>
  </body>
</html>
